WordPressの記事をMarkdownで書いて極力HTMLを触らずに投稿してみる

DevelopersIO(WordPress)での記事編集にて、細かいhtmlタグ調整及び不要なhtmlタグを混ぜたくない為に、テキスト編集にてhtmlタグを手打ちすることがよくあります。問題は、htmlタグのとじ忘れや入れ子のミスで、プレビュー時に頭を抱えやすいところです。

普段からvimを使ってMarkDownを書くことがそこそこあるため、どうせならベースをMarkDownで済ませて、微調整を直接HTML編集とするのが楽なのではないかと思い至りました。

今回はvimプラグインのVimRepressと、Pythonライブラリのmarkdownの組み合わせを利用してみます。

目次

• 環境のセットアップ
  • VimRepressのインストール
  • markdownのインストール
  • .vimpressrcの作成
• エントリーの作成
  • 各種要素の入力
  • パーマリンク
• プレビュー確認
  • MarkDown形式
  • WordPress上での表示確認
  • 注意事項
• 外部コンテンツの埋め込み
• まとめ

環境のセットアップ

VimRepressのインストール

• Github: vim-scripts/VimRepress

幾つかのForkリポジトリがあることを確認済みですが、敢えてオリジナルとしました。Fork先での根本実装に大差がないことと追加実装の依存ライブラリへの対応の手間を省くためです。

今回はNeoBundleでの管理前提です。その他の管理方法を取っておられる場合は、読み替えてください。

NeoBundle 'vim-scripts/VimRepress'

markdownのインストール

pyenvの固定パスへインストールします。vimからのPythonライブラリ呼び出しにて、Pipenv経由の動的パスを正常に検知するところまで検証時に到達できなかったためです。

そのかわり、ディレクトリ問わず何処からでもWordPressへの投稿が可能となります。

% pip install markdown

.vimpressrcの作成

投稿先設定のため$HOME/.vimpressrcを作成します。

[Blog]
blog_url = https://example.wordpress.jp/
username = user
password = pass

エントリーの作成

手順は色々と考えられますが、無難に以下の内容を上げておきます。

1. 投稿用フォーマット作成
2. WordPress上に空の下書き作成
3. 原稿をローカルに保存

% vim
:BlogNew post
:BlogSave draft
:save entry.md

:saveにて定期的にローカル保存はこなすようにしておきましょう。WordPress上にはMarkdown書式のテキストが保存されず、HTMLに変換された文章のみが残ります。

各種要素の入力

チェックボックス式の要素については、それらはWordPress上へ転送した後にチェックすることをお勧めします。

タグについては、コンマで区切る事により想定した動作となります。

パーマリンク

:BlogSave draftを行う度にtitle要素で上書き変更されます。必要であれば、公開直前に忘れずに編集しましょう。

プレビュー確認

MarkDown形式

:BlogPreview localを利用することで、エントリー内syntaxを確認することが出来ます。

WordPress上での表示確認

:BlogSave draftにてWordPress上にHTML形式に変換して保存した後、WordPressを開いて下書き記事をプレビューで確認します。

注意事項

:BlogPreview publishを実行すると、記事を公開した上でのプレビューモードになります。下書き状態のままプレビューを想定していた場合は思わぬ事故となるため気をつけましょう。

外部コンテンツの埋め込み

Markdownの文面に挟む事への拘りがなければ、別途テキストとして差し込むURLを保存しておき、投稿前にそれらを追記修正するという手もあります。

まとめ

検証を行いつつの記事作成としてみました。HTMLタグ入力の手間が大きく省けるという点で、Markdown形式での入力は一つの有効な手段だと思います。今回はvimを利用しましたが、エディタによっては同等の補完プラグイン等が存在する可能性があります。

画像や動画を挟みたい場合はHTML変換後の作業となる可能性が高いのですが、エントリーのベース作成手段として大幅に手間は省けると思います。